<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		#div1{
			width: 800px;height: 600px;
			border: 1px solid #e0e0e0;
			background: #f5f5f5;
		}
	</style>
</head>
<body>
<div id="div1">拖到这里上传</div>
<script>

window.onload = function(){
	let oDiv = document.getElementById("div1");

	oDiv.addEventListener('dragenter',function (ev) {
	  oDiv.innerHTML = '松开鼠标';
	});
	oDiv.addEventListener('dragleave',function (ev) {
		oDiv.innerHTML = '拖到这里上传';
	});
	oDiv.addEventListener('dragover',function (ev) {
		ev.preventDefault();
	});
	oDiv.addEventListener('drop',function (ev) {
		ev.preventDefault();

		//
	    let oFile = ev.dataTransfer.files[0];
		//读取
	   let reader = new FileReader();
	   reader.onload = function(ab){
	     alert('成功')
			   console.log(this.result);
		};
		reader.onerror = function(){
					alert('失败')
		};
		reader.readAsText(oFile);
			console.log(reader);
			//reader.read();
	});

}
</script>
</body>
</html>